$color-white: #ffffff;
$color-light-grey: #e8e8e8;
$color-mid-grey: #999999;
$color-dark-grey: #666666;
$color-black: #000000;

$color-red-step1: #ff462d;
$color-red-step2: #ff422f;
$color-red-step3: #ff3634;
$color-red-step4: #ff223c;
$color-red-step5: #ff0c45;

$color-purple-step1: #7e3efd;
$color-purple-step2: #7b3df9;
$color-purple-step3: #7039ed;
$color-purple-step4: #5f32d8;
$color-purple-step5: #4828bc;
$color-purple-step6: #3f25b2;

$color-yellow: #ffbf1f;
$color-blood-orange: #e54c23;
$color-shadow: rgba($color-black, 0.2);

// body
$color-text-light: $color-white;
$color-text-dark: $color-black;
$color-link: rgba($color-white, 0.8);
$color-link-hover: rgba($color-white, 0.9);

// title
$color-title-border: $color-yellow;

// button
$color-button-text: $color-white;
$color-button-default-background: $color-yellow;
$color-button-default-hover-background: lighten($color-yellow, 5%);
$color-button-danger-background: $color-blood-orange;
$color-button-danger-hover-background: lighten($color-blood-orange, 5%);

// slot
$color-slot-background: $color-yellow;
$color-slot-shadow: $color-shadow;
$color-slot-inner-background: $color-white;
$color-slot-text: $color-black;

// settings
$color-settings-mask: rgba($color-black, 0.6);
$color-settings-background-red: darken($color-red-step5, 8%);
$color-settings-background-purple: darken($color-purple-step6, 8%);

// textarea
$color-input-background: $color-light-grey;
$color-input-placeholder: $color-mid-grey;
$color-input-text: $color-black;

// switch
$color-switch-handle-disabled: $color-dark-grey;
$color-switch-handle-red: darken($color-red-step5, 8%);
$color-switch-handle-purple: darken($color-purple-step6, 8%);
